<!DOCTYPE html>
<html lang="" xml:lang="">
  <head>
    <title>📼 share again for xaringan</title>
    <meta charset="utf-8" />
    <meta name="author" content="xaringanExtra" />
    <script src="libs/header-attrs/header-attrs.js"></script>
    <link href="libs/remark-css/robot-fonts.css" rel="stylesheet" />
    <link href="libs/remark-css/robot.css" rel="stylesheet" />
    <script src="libs/clipboard/clipboard.min.js"></script>
    <link href="libs/xaringanExtra-clipboard/xaringanExtra-clipboard.css" rel="stylesheet" />
    <script src="libs/xaringanExtra-clipboard/xaringanExtra-clipboard.js"></script>
    <script>window.xaringanExtraClipboard(null, {"button":"Copy Code","success":"Copied!","error":"Press Ctrl+C to Copy"})</script>
    <link href="libs/shareon/shareon.min.css" rel="stylesheet" />
    <script src="libs/shareon/shareon.min.js"></script>
    <link href="libs/xaringanExtra-shareagain/shareagain.css" rel="stylesheet" />
    <script src="libs/xaringanExtra-shareagain/shareagain.js"></script>
    <script src="libs/fitvids/fitvids.min.js"></script>
    <meta name="description" content="Embed xaringan slides in R Markdown websites with style"/>
    <meta name="github-repo" content="gadenbuie/xaringanExtra"/>
    <meta name="twitter:title" content="Share Again for xaringan"/>
    <meta name="twitter:description" content="Embed xaringan slides in R Markdown websites with style"/>
    <meta name="twitter:url" content="https://pkg.garrickadenbuie.com/xaringanExtra"/>
    <meta name="twitter:image:src" content="https://pkg.garrickadenbuie.com/xaringanExtra/share-again/social-card.png"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:creator" content="@grrrck"/>
    <meta name="twitter:site" content="@grrrck"/>
    <meta property="og:title" content="Share Again for xaringan"/>
    <meta property="og:description" content="Embed xaringan slides in R Markdown websites with style"/>
    <meta property="og:url" content="https://pkg.garrickadenbuie.com/xaringanExtra"/>
    <meta property="og:image" content="https://pkg.garrickadenbuie.com/xaringanExtra/share-again/social-card.png"/>
    <meta property="og:type" content="website"/>
    <meta property="og:locale" content="en_US"/>
    <meta property="article:author" content="Garrick Aden-Buie"/>
  </head>
  <body>
    <textarea id="source">
class: center, middle, inverse, title-slide

# share again<br>.gray[for xaringan]
## 📼
### <a href='https://pkg.garrickadenbuie.com/xaringanExtra'>xaringanExtra<a>
### Embeded xaringan slides with a .purple[share bar]

---


class: center



&lt;style type="text/css"&gt;
.gray { color: #999; }
.big { font-size: 200%; }
.purple { color: #A53B87; }
.green { color: #42B983; }
&lt;/style&gt;



## Meet .green[share again]

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:66%;">
<iframe src="share-again.html" width="400" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---
class: center
background-image: url('img/meet-share-again-2.jpg')
background-size: cover

## .green[Navigate] through the slides

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:66%;">
<iframe src="share-again.html" width="400" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---
class: center
background-image: url('img/meet-share-again-3.jpg')
background-size: cover

## Slide .green[title] filled automatically

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:66%;">
<iframe src="share-again.html" width="400" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---
class: center
background-image: url('img/meet-share-again-4.jpg')
background-size: cover

## Go .green[fullscreen]

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:66%;">
<iframe src="share-again.html" width="400" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---
class: center
background-image: url('img/meet-share-again-5.jpg')
background-size: cover

## .green[Share] your slides .green[again]

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:66%;">
<iframe src="share-again.html" width="400" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

## Share your slides in 3 easy steps

1. Add `use_share_again()` to your slides
    
    `````markdown
    ```{r share-again, echo=FALSE}
    xaringanExtra::use_share_again()
    ```
    ````
--

1. Style your share bar and choose social media sites

    ````markdown
    ```{r style-share-again, echo=FALSE}
    xaringanExtra::style_share_again(
      share_buttons = c("twitter", "linkedin", "pocket")
    )
    ```
    ````
--

1. Embed your slides in [blogdown](https://bookdown.org/yihui/blogdown/) or R Markdown websites

    ````markdown
    ```{r embed-xaringan, echo=FALSE}
    xaringanExtra::embed_xaringan(url = "share-again.html", ratio = "4:3")
    ```
    ````
    
    &lt;span class="gray"&gt;*Works with &lt;span style="text-decoration: underline"&gt;any&lt;/span&gt; xaringan presentation, _share again_ not required&lt;/span&gt;

---

## You might also like .purple[metathis]

For great looking share cards on social media, too,
combine with [metathis](https://pkg.garrickadenbuie.com/metathis).


```r
library(metathis)

meta() %&gt;%
  meta_general(
    description = "Embed xaringan slides in R Markdown websites with style",
  ) %&gt;% 
  meta_name("github-repo" = "gadenbuie/xaringanExtra") %&gt;% 
  meta_social(
    title = "Share Again for xaringan",
    url = "https://pkg.garrickadenbuie.com/xaringanExtra",
    image = paste0(
      "https://pkg.garrickadenbuie.com/xaringanExtra/",
      "share-again/social-card.png"
    ),
    og_type = "website",
    og_author = "Garrick Aden-Buie",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@grrrck"
  )
```

---
class: center middle

&lt;img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="25%" alt="GitHub Octocat Logo" /&gt;

### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)

    </textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"highlightStyle": "atom-one-light"
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
  window.dispatchEvent(new Event('resize'));
});
(function(d) {
  var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  if (!r) return;
  s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
  d.head.appendChild(s);
})(document);

(function(d) {
  var el = d.getElementsByClassName("remark-slides-area");
  if (!el) return;
  var slide, slides = slideshow.getSlides(), els = el[0].children;
  for (var i = 1; i < slides.length; i++) {
    slide = slides[i];
    if (slide.properties.continued === "true" || slide.properties.count === "false") {
      els[i - 1].className += ' has-continuation';
    }
  }
  var s = d.createElement("style");
  s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
  d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
  var deleted = false;
  slideshow.on('beforeShowSlide', function(slide) {
    if (deleted) return;
    var sheets = document.styleSheets, node;
    for (var i = 0; i < sheets.length; i++) {
      node = sheets[i].ownerNode;
      if (node.dataset["target"] !== "print-only") continue;
      node.parentNode.removeChild(node);
    }
    deleted = true;
  });
})();
(function() {
  "use strict"
  // Replace <script> tags in slides area to make them executable
  var scripts = document.querySelectorAll(
    '.remark-slides-area .remark-slide-container script'
  );
  if (!scripts.length) return;
  for (var i = 0; i < scripts.length; i++) {
    var s = document.createElement('script');
    var code = document.createTextNode(scripts[i].textContent);
    s.appendChild(code);
    var scriptAttrs = scripts[i].attributes;
    for (var j = 0; j < scriptAttrs.length; j++) {
      s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
    }
    scripts[i].parentElement.replaceChild(s, scripts[i]);
  }
})();
(function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
})();</script>

<script>
slideshow._releaseMath = function(el) {
  var i, text, code, codes = el.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
      text = code.textContent;
      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$\$(.|\s)+\$\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src  = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
  if (location.protocol !== 'file:' && /^https?:/.test(script.src))
    script.src  = script.src.replace(/^https?:/, '');
  document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
  </body>
</html>
